<template>
	<view class="content">
		<view class="service_type">
			<span>选择服务类型</span>
		</view>
		<view class="typeAll">
			<view class="type">
				<span>我要退款（无需退货）</span>
				<div style="display: flex;align-items: center;-webkit-box-align: center;-webkit-box-pack: end;justify-content: flex-end;">
					<div style="flex: none;height: 32rpx;line-height: 32rpx;">
						<u-icon color="white" name="checkbox-mark" style="border-radius: 100%; background: #1ba784;border-color: #1ba784;"></u-icon>
					</div>
				</div>
			</view>
			<view class="type">
				<span>我要退款退货</span>
				<div style="display: flex;align-items: center;-webkit-box-align: center;-webkit-box-pack: end;justify-content: flex-end;">
					<div style="flex: none;height: 32rpx;line-height: 32rpx;">
						<u-icon color="white" name="checkbox-mark" style="border-radius: 100%; background: #1ba784;border-color: #1ba784;"></u-icon>
					</div>
				</div>
			</view>
			<view class="type">
				<span>我要换货</span>
				<div style="display: flex;align-items: center;-webkit-box-align: center;-webkit-box-pack: end;justify-content: flex-end;">
					<div style="flex: none;height: 32rpx;line-height: 32rpx;">
						<u-icon color="white" name="checkbox-mark" style="border-radius: 100%; background: #1ba784;border-color: #1ba784;"></u-icon>
					</div>
				</div>
			</view>
		</view>
		<view class="cargoStatus">
			<span>选择货物状态</span>
		</view>
		<view class="statusAll">
			<view class="type">
				<span>未收到货</span>
				<div style="display: flex;align-items: center;-webkit-box-align: center;-webkit-box-pack: end;justify-content: flex-end;">
					<div style="flex: none;height: 32rpx;line-height: 32rpx;">
						<u-icon color="white" name="checkbox-mark" style="border-radius: 100%; background: #1ba784;border-color: #1ba784;"></u-icon>
					</div>
				</div>
			</view>
			<view class="type">
				<span>已收到货</span>
				<div style="display: flex;align-items: center;-webkit-box-align: center;-webkit-box-pack: end;justify-content: flex-end;">
					<div style="flex: none;height: 32rpx;line-height: 32rpx;">
						<u-icon color="white" name="checkbox-mark" style="border-radius: 100%; background: #1ba784;border-color: #1ba784;"></u-icon>
					</div>
				</div>
			</view>
			<view class="type">
				<span style="line-height: 68rpx; width: 30%;">售后原因</span>
				<u-input style="width: 70%;" v-model="value" :type="type" placeholder="退换货原因" @click="cli"/>
			</view>
			<view class="type">
				<span style="width: 30%;">退款金额</span>
				<span style="width: 70%;">299</span>
			</view>
			<view class="type">
				<span style="line-height: 68rpx;width: 30%;">售后说明</span>
				<u-input style="width: 70%;" v-model="value" :type="type" placeholder="请输入退款说明" />
			</view>
		</view>
		<view class="refundBtn">
			<u-button type="success" @click="refundBtn">立即申请售后</u-button>
		</view>
	</view>
</template>
    <div>
		<u-select ref="uSelect" class="refundSelect" mode="single-column" v-model="show" :list="list" @confirm="confirm"></u-select>
	</div>
	<!-- <u-toast ref="uToast" /> -->
<script>
	export default {
		data() {
			return {
				value: '',
				type: 'text',
				show:true,
				list:[
					{
						value:"1",
						label:'不喜欢/不想要'
					},
					{
						value:"2",
						label:'空包裹'
					},
					{
						value:"3",
						label:'未按约定时间发货'
					},
					{
						value:"4",
						label:'快递/物流一直未送达'
					},
					{
						value:"5",
						label:'货物破损已拒签'
					},
					{
						value:"6",
						label:'退运费'
					},
					{
						value:"7",
						label:'规格尺寸与商品页面描述不符'
					},
					{
						value:"8",
						label:'功能/效果不符'
					},
					{
						value:"9",
						label:'质量问题'
					},
					{
						value:"10",
						label:'少见/漏发'
					},
					{
						value:"11",
						label:'包装/商品破损'
					},
					{
						value:"12",
						label:'发票问题'
					},
				]
			}
		},
		methods: {
			confirm(e){
				console.log(e);
			},
			cil(){
				this.$refs.uSelect.show({
					
				})
			},
			
			
			
		}
	}
</script>

<style lang="scss" scoped>
.content{
	// width: 100%;
	// height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: rgb(247, 248, 250);
	position: relative;
	.service_type{
		width: 100%;
		padding: 4.27vw 4.27vw 4.27vw 12.27vw;
		
		span{
			width: 100%;
			color: #969799;
			font-size: 3.73vw;
			line-height: 4.27vw;
		}
	}
	.typeAll{
		width: 100%;
		background: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.type{
		
		
		width: 85%;
		display: flex;
		justify-content: space-between;
		padding: 2.67vw 4.27vw;
		border-bottom: 2rpx solid #efefef;
		// background: #fff;
	}
	.cargoStatus{
		width: 100%;
		padding: 4.27vw 4.27vw 4.27vw 12.27vw;
		
		span{
			width: 100%;
			color: #969799;
			font-size: 3.73vw;
			line-height: 4.27vw;
		}
	}
	.statusAll{
		width: 100%;
		background: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.u-input{
		border: none;
	}
	.refundBtn{
		width: 100%;
		position: absolute;
		bottom: -390rpx;
		display: flex;
		.u-button{
			background:#1ba784;
		}
	}
}
</style>
